import { computed, defineComponent, ref } from "vue";
import style from "./index.module.less";
import { Icon } from "vant";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "field",
  emits: ["click"],
  props: {
    name: {
      type: String,
      default: "",
    },
    isLink: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit, slots }) {
    const name = computed(() => (props.name ? props.name : "请输入"));
    const router = useRouter();
    const onClick = () => {
      if (props.isLink && props.url) {
        router.push(props.url);
      } else {
        emit("click");
      }
    };
    const renderValue = () => {
      if (props.value && !props.isLink) {
        return slots.value?.();
      } else {
        return <span>{name.value}</span>;
      }
    };
    return () => {
      return (
        <div onClick={onClick} class={style.main}>
          {renderValue()}
          {props.isLink && <Icon name="arrow" />}
        </div>
      );
    };
  },
});
